<template>
  <div class="page-view">
    <div class="top">
      <!-- <router-link
        :to="{name: 'selectCategory', query: {from: $route.name}}"
        class="classification-text"
        tag="span"
      >
        {{ CategoryName === '' ? '全部' :
          (CategoryName && CategoryName.length > 4 ? CategoryName.substring(0,4) + '...'
            : CategoryName) }}
        <van-icon
          name="arrow-down"
          class="arrow-down"
        />
      </router-link> -->
      <van-search
        v-model="value"
        background="#FFF"
        placeholder="搜索感兴趣班级"
        class="search"
        readonly
        @click="onSearch"
      >
        <div
          slot="left-icon"
        >
          <img
            src="~assets/class/search-icon.png"
            class="search-icon"
          >
        </div>
      </van-search>
    </div>
    <div v-if="ClassList.length > 0">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="— 没有更多了 —"
        class="classList"
        @load="getClassList"
      >
        <signatureClass
          v-for="item in ClassList"
          :key="item.ClassId"
          :item="item"
          :fun="'isClassList'"
          :user-scholarship="userScholarship"
        />
      </van-list>
    </div>
    <div
      v-else-if="ClassList.length <= 0 && finished"
      class="no-class"
    >
      <img
        class="no-img"
        src="~assets/class/no_data.png"
        alt="暂无相关班级"
      >
      <span class="no-text">
        暂时没有相关班级
      </span>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Search } from 'vant'
import store from '@/store/store'
export default Vue.extend({
  components: {
    'van-search': Search,
    signatureClass: () => import('components/Home/SignatureClass.vue'),
  },
  data () {
    let category = this.$store.state.category
    let fromRoute = this.$store.state.route.from.name === 'selectCategory' || 'class'
    return {
      ClassList: [],
      value: '',
      pageSize: 6,
      pageNum: 1,
      loading: true,
      finished: false,
      userScholarship: '0.00',
      scholarFinished: false,
    }
  },
  beforeRouteEnter (to, from, next) {
    // if (store.state.category.isXueLi || store.state.category.isSpecial) {
    //   if (from.name === 'home') {
    //     next(false)
    //   } else {
    //     next({ name: 'home', replace: true })
    //   }
    //   return
    // }
    if (to.query.moreClass || from.name === 'classSearch' || from.name === 'selectCategory' ||
      store.state.userInfo.UserId === '-1') {
      next()
      return
    }
    // 点击tabbar班级标签时，不再进行刷新
    if (from.name === 'myClass' && from.query.x666) {
      next(false)
    }
  },
  // beforeRouteLeave (to, from, next) {
  //   if (to.name !== 'selectCategory') {
  //     this.$store.commit(SET_CATEGORY, {
  //       isAll: false })
  //   }
  //   next()
  // },
  created () {
    (this.$root.$children[0] as any).active = 1
    this.getClassList()
  },
  methods: {
    // 获取奖学金详情
    getUserScholarshipDetail () {
      this.$axios({
        method: 'get',
        url: 'User/GetUserScholarship',
      }).then(res => {
        this.userScholarship = res.UserScholarship
        this.scholarFinished = true
      })
    },
    // 获取班级列表
    getClassList () {
      let isRecommend = 2
      if (this.$route.query.isRecommend) {
        isRecommend = 1
      }
      console.log('IsRecommend', isRecommend)
      this.$axios({
        url: 'course/getClassCourseListForWeb',
        data: {
          Page: this.pageNum,
          PageSize: this.pageSize,
          CategoryId: 2887,
          SearchKey: 1,
          IsRecommend: isRecommend,
          IsBuy: 2,
          IsHaveVideoLive: 2,
          IsAudition: 2,
          IsHasOffLineClass: 2,
        },
      }).then(res => {
        this.$set(this.$data, 'ClassList',
          [...this.ClassList, ...res.ClassList])
        this.loading = false

        if (this.pageNum >= res.SumPage) {
          this.finished = true
        } else {
          this.pageNum++
        }
      })
    },
    onSearch () {
      this.$router.push({ name: 'classSearch' })
    },
  },

})
</script>

<style lang="scss" scoped>
.page-view {
  min-height: 100%;
  background: #fff;
}
.top {
  height: 122px;
  line-height: 122px;
  color: #333333;
  display: flex;
  justify-content: center;
  margin: 0 24px;
}
.classification-text {
  // text-align: center;
  display: inline-block;
  font-size: 32px;
  min-width: 190px;
}
.arrow-down {
  vertical-align: text-top;
}
.search-icon {
  width: 32px;
  vertical-align: text-bottom;
}
.search {
  @include px1border(all, #CCC);
  border-radius: 32px;
  margin-top: 30px;
  margin-left: 24px;
  width: 475px;
  height: 66px;
}
  /deep/.van-search {
      padding: 14px 15px;
  }
  /deep/.van-search .van-cell {
      padding: 6px 0px;
      border-radius: 20px;
      margin: 0 4px;
    }
.classList {
  margin: 0 24px;
  padding-top: 2px;
}
.no-class {
  text-align: center;
  font-size: 36px;
  color: #666666;
  margin-top: 240px;
  .no-img {
    width: 150px;
    height: 250px;
  }
  .no-text {
    margin-top: 9px;
    display: block;
  }
}
</style>
